<template>
	<div class="loginStyle">
		<div class="loginContainer">
			<el-form :model="loginForm" ref="loginForm" :rules="rules" class="loginForm">
				<img class="logoImg" src="../assets/images/logo1.png" alt="" />
				<p class="loginTitle">后台管理系统</p>
				<el-form-item prop="username">
					<div style="display: flex; align-items: center">
						<i class="el-icon-user"></i>
						<el-input
							class="elinput"
							size="normal"
							type="text"
							v-model="loginForm.username"
							auto-complete="off"
							placeholder="请输入用户名"
						></el-input>
					</div>
				</el-form-item>
				<el-form-item prop="password">
					<div style="display: flex; align-items: center">
						<i class="el-icon-lock"></i>
						<el-input
							class="elinput"
							size="normal"
							type="password"
							v-model="loginForm.password"
							auto-complete="off"
							placeholder="请输入密码"
						></el-input>
					</div>
				</el-form-item>
				<el-form-item prop="code">
					<div style="display: flex; align-items: center">
						<i class="el-icon-chat-square"></i>
						<el-input
							class="elinput"
							size="normal"
							type="text"
							v-model="loginForm.code"
							auto-complete="off"
							placeholder="点击图片更换验证码"
							:maxlength="4"
							@keydown.enter.native="submitLogin"
						></el-input>
						<el-image
							:src="vcUrl"
							@click="updateVerifyCode"
							style="padding-left: 5px; width: 200px;cursor: pointer;"
						></el-image>
					</div>
				</el-form-item>
				<el-form-item align="center">
					<el-button
						size="normal"
						type="primary"
						style="width: 100%; height: 60px"
						@click="submitLogin('loginForm')"
						>登录</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
import qs from 'qs';
import { Message } from 'element-ui';
import { NOOP } from '@/utils';
export default {
	name: 'Login',
	data() {
		return {
			loading: false,
			vcUrl: '',
			loginForm: {
				username: '',
				password: '',
				code: '',
				randomCode: '',
			},
			rules: {
				username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				code: [
					{ required: true, message: '请输入验证码', trigger: 'blur' },
					{ min: 4, max: 4, message: '请输入4个数字', trigger: 'blur' }
				],
			},
		};
	},
	created() {
		this.updateVerifyCode();
	},
	methods: {
		updateVerifyCode() {
			this.$axios.get('/admin/auth/captcha').then((res) => {
				this.loginForm.randomCode = res.data.random_code;
				this.vcUrl = res.data.captcha_img;
			}).catch(NOOP);
		},
		submitLogin(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$axios
						.post('/login?' + qs.stringify(this.loginForm))
						.then((res) => {
							console.log('qqq', res);
							const jwt = res.data.jwt;
							console.log('wt', jwt);
							// 将jwt存储到应用store中
							this.$store.commit('SET_TOKEN', jwt);
							this.$router.push({name: 'Index'}).catch((e) => {
								console.log(e);
							});
						})
						.catch((error) => {
							console.log('error', error);
							this.updateVerifyCode();
							console.log('error submit!!');
						});
				} else {
					this.updateVerifyCode();
					console.log('error submit!!');
					return false;
				}
			});
		},
	},
};
</script>

<style>
.loginStyle {
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url('../assets/images/login-bg.jpg');
	width: 100%;
	height: 100%;
	background-size: cover;
}
.loginContainer {
	width: 87.5%;
	height: 87%;
	background-image: url('../assets/images/login1.jpg');
}
.loginForm {
	margin-left: 900px;
	margin-top: 210px;
	width: 400px;
}
.loginTitle {
	margin: 15px auto 20px auto;
	text-align: center;
	color: #303033;
}
.logoImg {
	width: auto;
	height: 59px;
	margin: 0 auto;
	display: block;
}
/* 利用穿透，设置input边框隐藏 */
.elinput >>> .el-input__inner {
	border: 0;
}
.elinput {
	margin-left: 20px;
}
.loginRemember {
	text-align: left;
	margin: 0px 0px 15px 0px;
}
</style>
